<!-- 用户修改密码 -->
<template>
  <div>
    <el-form
      :model="changepsd"
      status-icon
      :rules="psdRules"
      ref="changepsd"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="查找方式" prop="radio">
        <el-radio-group v-model="changepsd.radio" :disabled="isDisabled">
          <el-radio label="phone">手机号</el-radio>
          <el-radio label="email">电子邮箱</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="验证码" prop="captcha">
        <el-input
          placeholder="请输入验证码"
          v-model="changepsd.captcha"
          autocomplete="new-password"
        ></el-input>
        <el-button
          plain
          @click="send_captcha"
          :disabled="isDisabled"
          class="sendCode"
          >{{ buttonName }}</el-button
        >
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          show-password
          type="password"
          v-model="changepsd.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          show-password
          type="password"
          v-model="changepsd.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="next">提交</el-button>
        <el-button @click="goBack()">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props:{
    goBack:Function,
    changepsd:Object,
    ruleForm:Object,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.changepsd.checkPass !== "") {
          this.$refs.changepsd.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.changepsd.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      //修改密码
      CountDown: 60,
      psdRules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        captcha: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
        ],
      },
      buttonName: "发送验证码",
      isDisabled: false,
    };
  },
  methods: {
    //修改密码
    send_captcha() {
      const { radio } = this.changepsd;
      sessionStorage.setItem("radio", radio);
      if (radio) {
        //先把按钮禁止，并进行倒计时，防止网速慢的用户重复点击
        this.isDisabled = true;
        let timerId = setInterval(() => {
          this.CountDown--;
          this.buttonName = this.CountDown + "秒后重试";
          if (this.CountDown <= 0) {
            clearInterval(timerId);
            this.buttonName = "重新发送";
            this.CountDown = 60;
            this.isDisabled = false;
          }
        }, 1000);
        //操作验证发送API BLOCK
        if (radio == "phone") {
          let account = this.ruleForm.phone_number;
          this.$store
            .dispatch("login/sms", account)
            .then((data) => {
              this.$message.success(data);
            })
            .catch((error) => {
              // this.$message.error("验证码发送失败，请重试");
              clearInterval(timerId);
              this.buttonName = "重新发送";
              this.CountDown = 60;
              this.isDisabled = false;
            });
          this.isPhone = true;
        } else {
          let account = this.ruleForm.email;
          this.$store
            .dispatch("login/email", account)
            .then((data) => {
              this.$message.success(data);
            })
            .catch((error) => {
              // this.$message.error("验证码发送失败，请重试");
              clearInterval(timerId);
              this.buttonName = "重新发送";
              this.CountDown = 60;
              this.isDisabled = false;
            });
        }
      }
    },
    next() {
      const { radio } = this.changepsd;
      if (!this.changepsd.captcha) {
        this.$message({
          message: "请输入验证码",
          type: "warning",
        });
      } else if (!this.changepsd.password) {
        this.$message({
          message: "请输入密码",
          type: "warning",
        });
      } else if (!this.changepsd.checkPass) {
        this.$message({
          message: "请再次输入密码",
          type: "warning",
        });
      } else {
        let forget_password_user_info =
          JSON.parse(sessionStorage.getItem("forget_password_user_info")) || {};
        forget_password_user_info.password = this.changepsd.password;
        forget_password_user_info.captcha = this.changepsd.captcha;
        forget_password_user_info.captcha_id =
          this.$store.state.login.captcha_id;
        if (radio === "phone") {
          forget_password_user_info.account = this.ruleForm.phone_number;
          this.$store
            .dispatch("login/forget_user_byphone", forget_password_user_info)
            .then((data) => {
              this.$notify.success({
                title: "提示",
                message: "密码重置成功",
                showClose: false,
              });
              sessionStorage.removeItem("forget_password_user_info");
              sessionStorage.removeItem("forget_password_countdown_info");
              this.$store.state.login = {};
              this.$router.push("/login");
            });
        } else {
          forget_password_user_info.account = this.ruleForm.email;
          this.$store
            .dispatch("login/forget_user_byemail", forget_password_user_info)
            .then((data) => {
              this.$notify.success({
                title: "提示",
                message: "密码重置成功",
                showClose: false,
              });
              sessionStorage.removeItem("forget_password_user_info");
              sessionStorage.removeItem("forget_password_countdown_info");
              this.$store.state.login = {};
              this.$router.push("/login");
            });
        }
      }
    },
  },
};
</script>

<style lang='scss'>
</style>
